<template>
  <div class="track-playback">
    <div id="amap"></div>

    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      class="filter-form"
      :class="{ 'small-form': smallForm }"
    >
      <el-row style="height: 100%; overflow: hidden;position: relative;">
        <el-form-item label="选择车辆">
          <el-input v-model="form.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="选择时间">
          <ul class="time-pick">
            <li>今天</li>
            <li>昨天</li>
            <li>前天</li>
          </ul>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            size="mini"
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            value-format="timestamp"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            size="mini"
            v-model="form.endTime"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="静止时间">
          <el-input v-model="form.stopTime" size="mini"></el-input>
        </el-form-item>
        <el-button
          type="primary"
          size="mini"
          style="width: 100%;"
          @click="search"
          >查询</el-button
        >

        <div class="bottom-bar">
          <span>功能介绍</span>
          <span @click="paintType = paintType === 'baidu' ? 'gaode' : 'baidu'"
            >{{ paintType === "baidu" ? "切换到高德地图" : "切换到百度地图"
            }}<i class="el-icon-arrow-right"></i
          ></span>
        </div>
      </el-row>

      <span class="form-up" v-if="!smallForm" @click="smallForm = !smallForm"
        ><i class="el-icon-arrow-up"></i
      ></span>

      <el-popover
        placement="right-start"
        width="400"
        trigger="click"
        v-if="!smallForm"
      >
        <el-cascader-panel
          v-model="carName"
          :options="options"
        ></el-cascader-panel>
        <span class="car-select" slot="reference"
          ><i class="el-icon-truck"></i
        ></span>
      </el-popover>
      <span class="form-down" v-if="smallForm" @click="smallForm = !smallForm"
        ><i class="el-icon-arrow-down"></i
      ></span>
    </el-form>

    <div class="data-area" :class="{ 'small-area': smallArea }">
      <div class="top-tool-bar">
        <ul class="table-type">
          <li
            :class="{ current: tableType === 'track' }"
            @click="tableType = 'track'"
          >
            轨迹详情
          </li>
          <li
            :class="{ current: tableType === 'warn' }"
            @click="tableType = 'warn'"
          >
            报警详情
          </li>
          <li
            :class="{ current: tableType === 'stay' }"
            @click="tableType = 'stay'"
          >
            经常停留点
          </li>
          <li
            :class="{ current: tableType === 'enclosure' }"
            @click="tableType = 'enclosure'"
          >
            围栏
          </li>
        </ul>

        <ul class="checkbox-group">
          <li>显示：</li>
          <li><el-checkbox v-model="checked">报警点</el-checkbox></li>
          <li><el-checkbox v-model="checked">轨迹</el-checkbox></li>
          <li><el-checkbox v-model="checked">经常停留点</el-checkbox></li>
          <li><el-checkbox v-model="checked">围栏</el-checkbox></li>
        </ul>

        <ul class="static-group">
          <li>开始里程： <span class="distance">0km</span></li>
          <li>结束里程： <span class="distance">0km</span></li>
          <li>行驶里程： <span class="distance">0km</span></li>
          <li><i class="el-icon-download"></i>导出</li>
          <li @click="smallArea = !smallArea">
            <i
              :class="smallArea ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              style="color: #1184e5; font-weight: bold; cursor: pointer;"
            ></i>
          </li>
        </ul>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column
          :prop="index + ''"
          :label="item"
          v-for="(item, index) in tableHeaders[tableType]"
          :key="index"
        >
        </el-table-column> -->

        <!-- <el-table-column prop="contentLength" label="内容长度"/> -->
        <el-table-column prop="dataType" label="数据类型" />
        <el-table-column prop="deviceId" width="170" label="设备ID" />
        <!-- <el-table-column prop="deviceStatus" label="设备状态"/> -->
        <!-- <el-table-column prop="direction" label="方向"/> -->
        <el-table-column prop="electric" label="电量">
          <template slot-scope="scope">
            <div>{{ scope.row.electric }}%</div>
          </template>
        </el-table-column>
        <el-table-column prop="flipCount" label="跳动次数" />
        <el-table-column prop="height" label="高度" />
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="latitude" label="纬度" />
        <el-table-column prop="locationCount" label="定位个数" />

        <el-table-column prop="locationType" label="定位类型" />
        <el-table-column prop="longitude" label="经度" />
        <el-table-column prop="manufacturer" label="制造商" />
        <el-table-column prop="satelliteCount" label="卫星数" />
        <el-table-column prop="signalStrength" label="信号强度" />
        <el-table-column prop="speed" label="速度" />
        <el-table-column prop="stepCount" label="步数" />
        <el-table-column prop="uploadDatetime" label="时间" width="100" />
      </el-table>

      <div class="pagination-box">
        <el-pagination
          :page-size="100"
          :page-sizes="[100, 200, 300, 400]"
          layout="prev, pager, next, total,sizes, jumper"
          :total="0"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import baiduClass from "../monitor-center/mapjs/baiduClass";
import gaodeClass from "../monitor-center/mapjs/gaodeClass";
import { getMap } from "@/api/map";
let tableHeaders = {
  track: [
    "序号",
    "车牌",
    "时间",
    "速度km/h",
    "方向",
    "里程",
    "部件状态",
    "原始经纬度",
    "位置"
  ],
  warn: ["序号", "报警类型", "开始时间", "结束时间", "报警地点"],
  stay: ["序号"],
  enclosure: ["围栏名称"]
};

export default {
  data() {
    return {
      params: {},
      carName: "",
      smallForm: false,
      smallArea: false,
      instance: null,
      checked: true,
      paintType: "baidu",
      tableType: "track",
      form: {},
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      options: [
        {
          value: "zhinan",
          label: "至尊宝888",
          children: [
            {
              value: "14020843471",
              label: "14020843471"
            }
          ]
        }
      ],
      tableHeaders
    };
  },

  methods: {
    // async getTable() {
    //   let data = {
    //     size: 500,
    //     "orders%5B0%5D.asc": false,
    //     "orders%5B0%5D.column": "upload_datetime"
    //   };

    //   await axios
    //     .get("http://82.157.10.172:8015/gps/getAll", { params: data })
    //     .then(res => {
    //       console.log(res, "resData");
    //       console.log(res.data.data.records);
    //       this.tableData = res.data.data.records;
    //     });
    // },

    search() {
      // let data = null;
      this.params = {
        size: 500,
        "orders%5B0%5D.asc": false,
        "orders%5B0%5D.column": "upload_datetime"
      };
      if (this.form.startTime !== undefined) {
        // debugger
        this.params.startTime = this.form.startTime;
      }
      if (this.form.endTime !== undefined) {
        this.params.endTime = this.form.endTime;
      }

      // if (first) {
      //   data = {
      //      endTime: this.form.endTime / 1000,
      //     startTime: this.form.startTime / 1000,
      //     size: 500,
      //     "orders%5B0%5D.asc": false,
      //     "orders%5B0%5D.column": "upload_datetime"
      //   };

      // } else {
      //   data = {
      //     // endTime: this.form.endTime,
      //     // startTime: this.form.startTime,
      //     size: 500,
      //     "orders%5B0%5D.asc": false,
      //     "orders%5B0%5D.column": "upload_datetime"
      //   };
      // }

      getMap(this.params).then(res => {
        this.tableData = res.data.data.records;

        this.instance.runLuShu(this.params);
      });
    },

    loadBaiduScript() {
      var script = document.createElement("script");
      let baseUrl =
        "https://api.map.baidu.com/api?v=2.0&ak=CtCjN4fQOfMkbI9UvaxBFCyLoZ5h9XRY&services=true&callback=initializeBaidu";
      script.src = baseUrl;
      document.body.appendChild(script);
    },

    loadGaodeScript() {
      var script = document.createElement("script");
      let baseUrl =
        "https://webapi.amap.com/maps?v=2.0&key=dade8b93e02e73546802e31ec0b1629f&callback=initializeGaode";
      let callback = this.paintType === "gaode" ? "&callback=initialize" : "";
      script.src = baseUrl + callback;
      document.body.appendChild(script);
    },

    loadBaiduPlugin(src) {
      var script = document.createElement("script");
      script.src = location.origin + location.pathname + src;
      document.body.appendChild(script);
    },

    initMap() {
      let constructor = this.paintType === "baidu" ? baiduClass : gaodeClass;
      this.instance = new constructor({
        el: "amap",
        vueInstance: this,
        type: this.paintType,
        mapType: "normal"
      });

      // setTimeout(() => {
      //   this.instance.runLuShu(this.params);
      // }, 2000);
    }
  },

  mounted() {
    this.search();
    if (!window.AMap || !window.BMap) {
      //改变地图加载完成后回调this的指向
      window.initializeBaidu = function() {
        this.paintType === "baidu" ? this.initMap() : "";
        this.loadBaiduPlugin("bdplugin/DrawingManager.min.js");
        this.loadBaiduPlugin("bdplugin/DistanceTool.min.js");
        this.loadBaiduPlugin("bdplugin/LuShu.min.js");
      }.bind(this);

      window.initializeGaode = function() {
        this.paintType === "gaode" ? this.initMap() : "";
      }.bind(this);

      //加载两个地图
      this.loadGaodeScript();
      this.loadBaiduScript();
      return;
    }

    this.initMap();
  },

  watch: {
    paintType: {
      immediate: false,
      handler() {
        this.initMap();
      }
    }
  },

  beforeDestroy() {
    this.instance.clearLuShuTimer();
  }
};
</script>

<style lang="scss">
.track-playback {
  width: 100%;
  height: 100%;
  position: relative;

  #amap {
    width: 100%;
    height: 100%;
  }

  .filter-form {
    position: absolute;
    z-index: 2000;
    top: 10px;
    left: 10px;
    background: white;
    height: 370px;
    padding: 10px;
    padding-right: 50px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.5s linear;

    &.small-form {
      height: 60px;
      overflow: hidden;
    }

    .el-form-item__label {
      font-size: 13px;
      font-weight: normal;
    }

    .el-form-item {
      margin-bottom: 15px;
    }

    .car-select,
    .form-down {
      position: absolute;
      right: 15px;
      top: 20px;
      font-size: 20px;
      color: #1184e5;
      cursor: pointer;
    }

    .form-down {
      background: #409eff;
      color: white;
      width: 30px;
      line-height: 27px;
      text-align: center;
      top: 16px;
      font-size: 16px;
    }
  }

  .time-pick {
    display: flex;
    justify-content: space-between;
    align-content: center;
    li {
      display: inline-block;
      width: 60px;
      text-align: center;
      height: 35px;
      line-height: 35px;
      border: 1px solid #7ec1f9;
      color: #7ec1f9;
      border-radius: 5px;
      vertical-align: top;
      cursor: pointer;
      &.active {
        background: #7ec1f9;
        color: white;
      }
    }
  }

  .bottom-bar {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #409eff;

    span:nth-child(2) {
      cursor: pointer;
    }
  }

  .data-area {
    position: absolute;
    z-index: 2000;
    width: calc(100% - 20px);
    height: 440px;
    left: 10px;
    bottom: 10px;
    background: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.5s linear;

    &.small-area {
      height: 45px;
    }

    .top-tool-bar {
      height: 45px;
    }

    .table-type {
      height: 45px;
      display: inline-block;

      li {
        display: inline-block;
        line-height: 45px;
        padding: 0 30px;
        font-size: 14px;
        font-weight: 600;
        color: #acb0b7;
        cursor: pointer;

        &:hover {
          color: #1184e5;
        }

        &.current {
          color: #1184e5;
          border-bottom: 2px solid #1184e5;
        }
      }
    }
  }

  .el-table {
    margin-top: 2px;
    height: calc(100% - 90px);
    th {
      border-bottom: 1px solid #ebeef5;
      background-color: #f5f8fc;
    }
  }

  .checkbox-group,
  .static-group {
    display: inline-block;

    li {
      display: inline-block;
      padding: 0 15px;
    }
  }

  .static-group {
    float: right;
    li {
      line-height: 45px;
      font-size: 13px;

      .distance {
        color: #1184e5;
      }
    }
  }

  .form-up {
    position: absolute;
    display: inline-block;
    width: 30px;
    line-height: 30px;
    height: 30px;
    border-radius: 50%;
    background: #409eff;
    text-align: center;
    color: white;
    bottom: 0;
    left: 50%;
    cursor: pointer;
    transform: translate(-50%, 50%);
  }

  .pagination-box {
    height: 45px;
    line-height: 45px;
    margin-top: 10px;
    text-align: center;
  }
}
</style>
